<template>
  <div>
    <div class="mt-10">
      <el-form ref="queryFormRef" :inline="true" :model="queryObj" size="large">
        <el-form-item label="国家/地区" prop="country_code">
          <el-select v-model="queryObj.country_code" filterable clearable placeholder="国家和地区" style="width: 180px">
            <el-option label="全部" :value="''" />
            <el-option v-for="item in countryList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="业务用途" prop="business">
          <el-select v-model="queryObj.business" placeholder="业务用途" clearable style="width: 180px">
            <el-option label="全部" :value="''" />
            <el-option v-for="item in businessList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryObj.status" placeholder="状态" clearable style="width: 180px">
            <el-option label="全部" :value="''" />
            <el-option label="停用" :value="0" />
            <el-option label="正常" :value="1" />
            <el-option label="即将过期" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onCurrentChange('staticProxy', 1)" class="primary-btn">查询</el-button>
          <el-button type="primary" class="info-btn" @click="onReset('staticProxy', 1)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mt-10">
      <el-table :data="result.staticProxyData" border stripe style="width: 100%" class="j-table mt-0" :row-class-name="getRowClassName">
        <el-table-column prop="order_nu" label="订单号">
          <template #default="scope">
            <span>{{ scope.row.order_nu }}-{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="country_code" label="国家/地区" />
        <el-table-column prop="line_type" label="IP类型">
          <template #default="scope">
            <span v-if="scope.row.line_type == '2'">标准</span>
            <span v-else-if="scope.row.line_type == '3'">高级</span>
          </template>
        </el-table-column>
        <el-table-column prop="business" label="业务用途" />
        <el-table-column prop="proxy_info" label="代理信息" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <span v-if="scope.row.status == '0'">停用</span>
            <span v-else-if="scope.row.status == '1'">正常</span>
            <span v-else-if="scope.row.status == '2'">即将过期</span>
          </template>
        </el-table-column>
        <el-table-column prop="expired_time" label="到期时间" />
        <el-table-column prop="action" label="操作" width="120px">
          <template #default="scope">
            <el-button type="primary" v-if="scope.row.status != '0'" text :icon="Postcard " style="margin-left: 0" @click="onRenewal(scope.row)">续费</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="j-pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="result.staticProxyPage"
          :pageSize="result.staticProxyLimit"
          :total="result.staticProxyTotal"
          @current-change="
            (val) => {
              onCurrentChange('staticProxy', val);
            }
          "
        />
      </div>
    </div>

    <Renewal ref="renewalRef" @confirm="onConfirm" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import type { FormInstance, FormRules } from 'element-plus';
  import { Switch, Postcard } from '@element-plus/icons-vue';
  import Renewal from '../renewal/zh-cn.vue';

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const props = defineProps<{
    result: Object;
    countryList: Array;
    businessList: Array;
  }>();

  const emits = defineEmits<{
    (event: 'confirm'): void;
    (event: 'page-change'): void;
  }>();

  const queryFormRef = ref<FormInstance>();
  const queryObj = reactive({
    country_code: '',
    business: '',
    status: '',
  });
  const renewalRef = ref();

  const onCurrentChange = (type, val) => {
    emits('page-change', type, val, queryObj);
  };

  const onReset = (type, val) => {
    queryFormRef.value.resetFields();
    emits('page-change', type, val, queryObj);
  };

  const onConfirm = (row) => {
    emits('page-change', 'staticProxy', 1, queryObj);
  };

  const onRenewal = (row) => {
    renewalRef.value.onOpen(row)
  };

  const getRowClassName = ({row, rowIndex}) => {
    return row.status == '2' ? 'cell-warning' : ''
  };

  onMounted(() => {
    queryObj.status = route.query.status && route.query.status != '' ? Number(route.query.status) : ''
  });
</script>

<style scoped lang="scss"></style>
